<template>
  <div class="login">
    <CoffeeNav></CoffeeNav>
    <div class="logreg">
      <div class="poster">
        <p>欢迎来到卡菲咖啡</p>
      </div>
      <div class="log">
        <div class="inp">
          <van-field
            v-model="userLog.phone"
            type="number"
            label="手机号"
            placeholder="输入手机号"
          />
          <van-field
            v-model="userLog.password"
            :type="isPass ? 'password' : 'text'"
            label="密码"
            placeholder="输入密码"
            :right-icon="isPass ? 'closed-eye' : 'eye-o'"
            @click-right-icon="isPass = !isPass"
          />
        </div>
        <div class="findback">
          <span @click="toRetrieve">找回密码</span
          ><span @click="show = true">现在注册</span>
        </div>
        <div class="button">
          <van-button plain round hairline color="#CC9145" @click="log"
            >登 录</van-button
          >
        </div>
      </div>
    </div>
    <van-popup round position="bottom" v-model="show" closeable>
      <div class="reg">
        <h2>注册</h2>
        <div class="inp">
          <van-field
            v-model="userReg.phone"
            type="number"
            label="手机号"
            placeholder="输入手机号(11位)"
          />
          <van-field
            v-model="userReg.password"
            :type="isPass ? 'password' : 'text'"
            label="密码"
            placeholder="输入密码(6-16位)"
            :right-icon="isPass ? 'closed-eye' : 'eye-o'"
            @click-right-icon="isPass = !isPass"
          />
          <van-field
            v-model="userReg.nickName"
            label="昵称"
            placeholder="输入昵称(2-12位)"
          ></van-field>
        </div>
        <div class="button">
          <van-button block color="#CC9145" @click="reg">注 册</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import "../assets/less/login.less";
import CoffeeNav from "../components/CoffeeNav";
import { utils } from "../assets/js/utils";
export default {
  name: "Login",
  components: {
    CoffeeNav,
  },
  data() {
    return {
      show: false,
      isPass: true,
      userLog: {
        phone: "",
        password: "",
      },
      userReg: {
        phone: "",
        password: "",
        nickName: "",
      },
    };
  },
  methods: {
    toRetrieve() {
      this.$router.push({ name: "Retrieve" });
    },
    reg() {
      let regData = {
        phone: {
          value: this.userReg.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号输入错误",
        },
        password: {
          value: this.userReg.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码输入错误",
        },
        nickName: {
          value: this.userReg.nickName,
          reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,11}$/,
          errorMsg: "昵称只支持汉字、字母和数字",
        },
      };
      if (!utils.validForm(regData)) {
        return;
      }
      this.$axios({
        method: "POST",
        url: "./register",
        data: {
          appkey: this.appkey,
          nickName: this.userReg.nickName,
          password: this.userReg.password,
          phone: this.userReg.phone,
        },
      })
        .then((res) => {
          //   console.log('register==>',res);
          this.$toast.clear();
          if (res.data.code == 100) {
            this.show = false;
            this.userReg = [];
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err==>", err);
        });
    },

    log() {
      let logData = {
        phone: {
          value: this.userLog.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号输入错误",
        },
        password: {
          value: this.userLog.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码输入错误",
        },
      };
      if (!utils.validForm(logData)) {
        return;
      }

      this.$axios({
        method: "POST",
        url: "./login",
        data: {
          appkey: this.appkey,
          password: this.userLog.password,
          phone: this.userLog.phone,
        },
      })
        .then((res) => {
          //   console.log('login==>',res);
          this.$toast.clear();
          if (res.data.code == 200) {
            this.$cookies.set("tokenString", res.data.token, "7d");
            this.$router.push({ path: "/" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err==>", err);
        });
    },
  },
};
</script>